<template>
  <div class="home">
    <!-- 导航栏 -->
    <el-header class="header">
      <el-row type="flex" justify="space-between" align="middle">
        <el-col :span="6">
          <el-logo>购物商城</el-logo>
        </el-col>
        <el-col :span="12">
          <el-input
            v-model="searchQuery"
            placeholder="搜索商品"
            prefix-icon="el-icon-search"
            @keyup.enter="handleSearch"
          ></el-input>
        </el-col>
        <el-col :span="6" class="right-nav">
          <el-button type="text" @click="goToCart">购物车</el-button>
          <el-button type="text" @click="goToUser">个人中心</el-button>
        </el-col>
      </el-row>
    </el-header>

    <!-- 主体内容 -->
    <el-container>
      <!-- 分类栏 -->
      <el-aside width="200px">
        <el-menu
          default-active="1"
          class="el-menu-vertical-demo"
          @select="handleSelect"
          :unique-opened="true"
        >
          <el-submenu v-for="category in categories" :key="category.id" :index="category.id.toString()">
            <template slot="title">
              <i :class="category.icon"></i>
              <span>{{ category.name }}</span>
            </template>
            <el-menu-item-group v-if="category.children && category.children.length > 0">
              <el-menu-item
                v-for="subCategory in category.children"
                :key="subCategory.id"
                :index="`${category.id}-${subCategory.id}`"
              >
                {{ subCategory.name }}
              </el-menu-item>
              <el-submenu
                v-if="subCategory.children && subCategory.children.length > 0"
                v-for="subCategory in category.children"
                :key="subCategory.id"
                :index="`${category.id}-${subCategory.id}`"
              >
                <template slot="title">{{ subCategory.name }}</template>
                <el-menu-item
                  v-for="subSubCategory in subCategory.children"
                  :key="subSubCategory.id"
                  :index="`${category.id}-${subCategory.id}-${subSubCategory.id}`"
                >
                  {{ subSubCategory.name }}
                </el-menu-item>
              </el-submenu>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>

      <!-- 商品列表 -->
      <el-main>
        <el-row :gutter="20">
          <el-col :span="6" v-for="product in products" :key="product.id">
            <el-card :body-style="{ padding: '20px' }">
              <img :src="product.image" class="product-image" alt="product" />
              <div class="product-info">
                <h3>{{ product.name }}</h3>
                <p>{{ product.description }}</p>
                <div class="price">
                  <span class="price-amount">¥{{ product.price }}</span>
                  <el-button type="primary" size="small" @click="addToCart(product)">
                    加入购物车
                  </el-button>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import axios from 'axios';
import {getCategoryList} from "@/api/system/category";

export default {
  data() {
    return {
      searchQuery: '',
      products: [
        { id: 1, name: '商品 A', description: '这是一个商品描述', price: 99.99, image: 'https://via.placeholder.com/150' },
        { id: 2, name: '商品 B', description: '这是一个商品描述', price: 129.99, image: 'https://via.placeholder.com/150' },
        { id: 3, name: '商品 C', description: '这是一个商品描述', price: 79.99, image: 'https://via.placeholder.com/150' },
        { id: 4, name: '商品 D', description: '这是一个商品描述', price: 149.99, image: 'https://via.placeholder.com/150' },
        // 更多商品...
      ],
      categories: []
    };
  },
  created() {
    this.fetchCategories();
  },
  methods: {
    fetchCategories() {
      getCategoryList().then(response => {
        this.categories = response.data;
      });
    },
    handleSearch() {
      console.log('搜索查询:', this.searchQuery);
      // 在这里实现搜索逻辑
    },
    addToCart(product) {
      console.log('加入购物车:', product);
      // 在这里实现将商品加入购物车的逻辑
    },
    goToCart() {
      this.$router.push('/cart');
    },
    goToUser() {
      this.$router.push('/user');
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
      // 根据选中的菜单项进行页面跳转或其他操作
    }
  }
};
</script>

<style scoped>
.home {
  background-color: #f7f7f7;
  min-height: 100vh;
}

.header {
  background-color: #409EFF;
  color: white;
  padding: 10px 0;
}

.right-nav {
  text-align: right;
}

.product-image {
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.product-info {
  margin-top: 10px;
}

.product-info h3 {
  font-size: 16px;
  font-weight: bold;
}

.product-info p {
  font-size: 14px;
  color: #999;
}

.price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

.price-amount {
  font-size: 18px;
  font-weight: bold;
  color: #f56c6c;
}
</style>
